<template>
  <div>
    <!-- 表格 -->
    <el-table :data="table.data" stripe style="width: 100%">
      <el-table-column prop="id" label="订单Id"> </el-table-column>
      <el-table-column prop="storeName" label="商家名称"> </el-table-column>
      <el-table-column prop="masterName" label="负责人姓名"> </el-table-column>
      <el-table-column prop="masterPhone" label="负责人电话"> </el-table-column>
      <el-table-column prop="status" label="订单状态">
        <template #default="scope">
          <el-tag v-if="scope.row.status === 0"> 未支付 </el-tag>
          <el-tag v-if="scope.row.status === 4" type="success"> 已安排 </el-tag>
          <el-tag v-if="scope.row.status === 6" type="danger"> 已退款 </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="订单价格"> </el-table-column>
      <el-table-column prop="carCount" label="检测车辆数"> </el-table-column>
      <el-table-column prop="createDate" label="下单时间"> </el-table-column>
      <el-table-column prop="serveName" label="商务负责人"> </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" size="mini" @click="dialogVisible(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <el-pagination background layout="prev, pager, next,jumper" :total="pagination.total" @current-change="initTable">
    </el-pagination>

    <!-- 详情对话框 -->
    <el-dialog title="订单详情" :visible.sync="dialog.visible" width="80%">
      <el-descriptions :column="3" border>
        <el-descriptions-item>
          <template slot="label"> 订单Id </template> {{ dialog.data.id }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 负责人姓名 </template> {{ dialog.data.masterName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 负责人电话 </template> {{ dialog.data.masterPhone }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 订单状态 </template>
          <el-tag v-if="dialog.data.status === 0"> 未支付 </el-tag>
          <el-tag v-if="dialog.data.status === 4" type="success"> 已安排 </el-tag>
          <el-tag v-if="dialog.data.status === 6" type="danger"> 已退款 </el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 订单价格 </template> {{ dialog.data.price }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 检测车辆数 </template> {{ dialog.data.carCount }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 下单时间 </template> {{ dialog.data.createDate }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 车辆详情 </template>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>

  </div>
</template>

<script>
export default {
  data() {
    return {
      table: {
        data: [],
      },
      pagination: {
        total: 0,
      },
      dialog: {
        visible: false,
        data: {},
      }
    }
  },
  methods: {
    initTable(pageNum = 1) {
      this.$http.get("/order/getOrder", {
        params: {
          pageNum,
          pageSize: 10,
        }
      }).then(res => {
        this.table.data = res.data.object.list;
        this.pagination.total = res.data.object.total;
      })
    },
    dialogVisible(val) {
      this.dialog.visible = true;
      this.dialog.data = val;
      console.log(val);
    },
  },
  mounted() {
    this.initTable();
  },
}
</script>

<style lang="scss" scoped>

</style>